<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input[type=text]{width:50px;}
  </style>
</head>
<body>
  <input type="text" id="txt1">
  <select id="computed">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
    <option value="%">%</option>
    <option value="**">**</option>
  </select>
  <input type="text" id="txt2">
  <input type="button" id="btn" value="=">
  <input type="text" id="result" disabled>
</body>
<script>
  // 选择器
  var txt1 = document.getElementById("txt1");
  var txt2 = document.getElementById("txt2");
  var comp = document.getElementById("computed");
  var btn = document.getElementById("btn");
  var res = document.getElementById("result");

  // 绑定事件
  btn.onclick = function(){
    // 处理数据
    var num1 = txt1.value - 0;
    var num2 = txt2.value - 0;
    var com = comp.value;
                // 将处理的数据，传给用于计算的功能
      // 并将计算结果，设置给指定元素
    res.value = computed(num1, num2, com);
  }

  // 计算功能：接收三个参数，分别为：数据1，数据2，符号
  function computed( n, m, c ){
    // 内部，根据传入的数据，完成功能
    var s = 0;
    switch(c){
      case "+":
        s = n + m;break;
      case "-":
        s = n - m;break;
      case "*":
        s = n * m;break;
      case "/":
        s = n / m;break;
      case "%":
        s = n % m;break;
      case "**":
        s = n ** m;break;
    }
    // 将功能执行完后，得到的最终数据，返回到函数外部，另做他用
    return s;
  }

</script>
</html>